<template>
  <div>
    <van-field
      class="select"
      :required="isRequired"
      :value="fieldValue"
      :name="label"
      :label="label"
      input-align="right"
      :readonly="true"
      is-link
      :placeholder="placeholder"
      :rules="[{ validator: requireValidator, message: placeholder }]"
      @click="handleShowPopup"
    />
    <van-popup v-model="showPopup" position="bottom" round>
      <van-area
        :title="label"
        :area-list="areaList"
        :columns-placeholder="['请选择', '请选择', '请选择']"
        :value="selectedValue"
        @cancel="handleCancel"
        @confirm="handleConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import areaList from '@/utils/area'

export default {
  name: 'AreaPicker',
  model: {
    prop: 'value',
    event: 'update'
  },
  props: {
    options: {
      type: Array,
      default() {
        return []
      }
    },
    optionsParam: {
      type: Object,
      default() {
        return {}
      }
    },
    optionsUrl: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    isRequired: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    labelName: {
      type: String,
      default: 'dictValue'
    },
    valueName: {
      type: String,
      default: 'dictCode'
    },
    value: {
      type: [String, Number, Array],
      default: ''
    }
  },
  data() {
    return {
      areaList: areaList,
      isView: this.disabled,
      selectedValue: '',
      showPopup: false,
      fieldValue: ''
    }
  },
  watch: {
    disabled: {
      handler(newV, oldV) {
        this.isView = newV
      },
      deep: true
    },
    value: {
      handler(newV, oldV) {
        if (newV !== oldV) {
          this.selectedValue = newV
          this.handlerAreaInfoForCode(newV)
        }
      },
      immediate: true,
      deep: true
    }
  },

  methods: {
    // 将区域码转换为区域地址信息
    handlerAreaInfoForCode(areaCode) {
      if (areaCode) {
        const provinceCode = areaCode.slice(0, 2).padEnd(6, '0')
        const cityCode = areaCode.slice(0, 4).padEnd(6, '0')
        const countyCode = areaCode
        let areaAddressInfo = ''

        if (this.areaList.province_list[provinceCode]) {
          areaAddressInfo += this.areaList.province_list[provinceCode] + '/'
        }
        if (this.areaList.city_list[cityCode]) {
          areaAddressInfo += this.areaList.city_list[cityCode] + '/'
        }
        if (this.areaList.county_list[countyCode]) {
          areaAddressInfo += this.areaList.county_list[countyCode] + ''
        }

        if (areaAddressInfo.endsWith('/')) {
          areaAddressInfo = areaAddressInfo.slice(0, -1)
        }
        this.fieldValue = areaAddressInfo
      }
    },

    // 弹出选择框
    handleShowPopup() {
      if (!this.isView) {
        this.showPopup = true
      }
    },

    // 确认按钮
    handleConfirm(value, index) {
      if (value && value.length) {
        const selectedLastItem = value.reverse().find((element) => {
          return !!element
        })
        if (selectedLastItem) {
          this.selectedValue = selectedLastItem.code
        }
      }
      this.$emit('update', this.selectedValue || '')
      this.showPopup = false
    },

    // 取消按钮
    handleCancel() {
      this.showPopup = false
    },

    // 必填校验器
    requireValidator() {
      if (this.isRequired) {
        return !!this.value
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped lang="less">
.select {
  align-items: center;

  &:after {
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 0.16rem;
    bottom: 0;
    left: 0.16rem;
    border-bottom: 0.01rem solid #ebedf0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 123;
  }
}
</style>
